<template>
  <div class="home" v-show="isPageShow">
    <div class="home-header">
      <van-swipe class="my-swipe" indicator-color="white" :autoplay="3000" ref="swiper">
        <van-swipe-item v-for="(item,index) in userProcessCount.legendList" :key="item.id">
          <div :id="'chart'+index" :style="{ width: '100%', height: '300px'}"></div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="home-fenge"></div>
    <div class="home-main">
      <div class="flex flex-center align-center hospital-two-title">
        <span class="hospital-two-title-s1"></span>
        <span class="hospital-two-title-s2"></span>
        <span class="hospital-two-title-content">患者列表</span>
        <span class="hospital-two-title-s2"></span>
        <span class="hospital-two-title-s1"></span>
      </div>
      <div class="home-main-content">
        <div class="flex flex-between align-center home-main-content-one" v-for="(item,index) in patientList" :key="item.id" @click="clickFunc(item.id, index)">
          <div class="flex flex-left align-center home-main-content-one-l">
            <div class="flex flex-center align-center home-main-content-one-name">{{item.name}}</div>
            <div class="home-main-content-one-info">
              <div class="home-main-content-one-info2">电话：{{item.phone}}</div>
              <div class="home-main-content-one-info1">诊断类型：{{item.checkTypeValue}}</div>
            </div>
          </div>
          <div class="home-main-content-one-sj"></div>
        </div>
      </div>
    </div>
    <!-- 编辑任务 -->
    <van-popup v-model:show="showCalender" position="bottom" :style="{ width: '100%', height: '70%' }" round>
      <div class="flex flex-column calender-main">
        <div class="flex flex-left align-center calender-main-week">
          <span v-for="item in week" :key="item.id">{{ item }}</span>
        </div>
        <div class="calender-main-list">
          <div class="calender-main-title">{{ nowDate }}</div>
          <div class="flex flex-left flex-wrap calender-main-date">
            <div class="flex flex-center align-center calender-main-date-list" v-for="item in dateList" :key="item.id"
                 :class="!item.isSelect?'calender-main-date-list1':(item.isWork ? 'calender-main-date-list2' : '')"
                 @click="selectCalendarFunc(item.dateTime, item.workId, item.works)">
              <span style="display: inline-block" v-if="item.isSelect && item.isWork">查看<br/>任务</span>
              <span v-else>{{ item.dateName }}</span>
            </div>
          </div>
          <div class="calender-main-title">{{ nowDate1 }}</div>
          <div class="flex flex-left flex-wrap calender-main-date">
            <div class="flex flex-center align-center calender-main-date-list" v-for="item in nextMonthArr" :key="item.id"
                 :class="!item.isSelect?'calender-main-date-list1':(item.isWork ? 'calender-main-date-list2' : '')"
                 @click="selectCalendarFunc(item.dateTime, item.workId, item.works)">
              <span v-if="item.isSelect && item.isWork">查看<br/>任务</span>
              <span v-else>{{ item.dateName }}</span>
            </div>
          </div>
        </div>
        <div class="calender-work-btn">
          <div class="flex flex-center calender-work-btn-div">
            <van-button type="primary" size="small" style="width: 80%;" color="#42DDA2" @click="confirmWorkFunc">进入流程看板</van-button>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 设置任务 -->
    <van-popup v-model:show="showWork" position="center" :style="{ width: '80%' }" round>
      <div class="flex flex-left flex-wrap home-work">
        <van-checkbox-group v-model="checkedWorkArr" @change="changeWorkFunc">
          <div class="flex flex-left align-center home-work-list" v-for="(item, index) in workTypeArr" :key="item.id">
            <van-checkbox :name="item.itemKey" checked-color="#42DDA2">{{ item.itemValue }}</van-checkbox>
            <van-icon name="star" color="#25cdb9" style="margin-left: 10px" v-if="index % 4 == 0"/>
            <van-icon name="star" color="#fadb14" style="margin-left: 10px" v-if="index % 4 == 1"/>
            <van-icon name="star" color="#565dff" style="margin-left: 10px" v-if="index % 4 == 2"/>
            <van-icon name="star" color="#ff8282" style="margin-left: 10px" v-if="index % 4 == 3"/>
          </div>
        </van-checkbox-group>
        <div class="home-work-btn">
          <van-button type="primary" style="width: 100%;" color="#42DDA2" @click="confirmWorkTypeFunc">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {createApp} from 'vue';
import {Toast} from 'vant';

const app = createApp();
app.use(Toast);
import * as echarts from 'echarts'
import {doctorHomeData, doctorWorkList, queryDic, tagWork} from '@/api/index.js'

export default {
  data() {
    return {
      isPageShow: false,
      typeArr:['line','bar'],
      patientList: [],
      showCalender: false,
      showWork: false,
      checkedWorkArr: [],
      time: '',
      userProcessCount: {},
      week: ['日', '一', '二', '三', '四', '五', '六'],
      nowDate: '',
      nowDate1: '',
      dateList: [],
      nextMonthArr: [],
      workTypeArr: '',
      selectPatientId: '', // 选择的患者id
      workDateArr: [], // 日期设置了任务
      workDateId: '', // 点击日期 任务id
    }
  },
  created() {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
    });
    this.doctorHomeDataFunc();
    this.getWorkTypeFunc();
  },
  methods: {
    // 补0
    addZeroFunc(n) {
      return n >= 10 ? n : '0' + n;
    },
    initEcharts(index, item) {
      let myChart = echarts.init(document.querySelector('#chart'+index))
      let option = {
        title: {
          text: item+"诊疗进程",
          left: 'left',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
        },
        xAxis: {
          type: 'category',
          data: this.userProcessCount.xtypeList,
          axisTick: {
            alignWithLabel: true
          }
        },
        series: [
          {
            "name": item,
            "type": this.typeArr[index%2],
            "data": [10+index, 12, 13-2*index, 5, 6, 4, index*2+5]
          }
        ]
      }
      myChart.setOption(option)
    },
    // 获取首页数据
    doctorHomeDataFunc() {
      let data = JSON.parse(sessionStorage.getItem('userInfo')).id;
      doctorHomeData(data).then(res => {
        console.log('homedata', res.data)
        this.patientList = res.data.patientList;
        this.userProcessCount = res.data.userProcessCount;
        setTimeout(() => {
          this.isPageShow = true;
          this.$toast.clear();
          this.$nextTick(() => {
            this.$refs.swiper.resize();
            let arr = this.userProcessCount.legendList;
            arr.forEach((item, index) => {
              this.initEcharts(index, item);
            })
          })
        }, 1000)
      })
    },
    // 获取任务类型
    getWorkTypeFunc() {
      queryDic('workType').then(res => {
        this.workTypeArr = res.data;
      })
    },
    // 点击编辑任务
    clickFunc(data,idx) {
      console.log('data', data)
      this.showCalender = true;
      this.selectPatientId = data;
      this.nowDate = '';
      this.nowDate1 = '';
      this.dateList = [];
      this.nextMonthArr = [];
      this.doctorWorkListFunc(this.selectPatientId);
      sessionStorage.setItem('patientInfo', JSON.stringify(this.patientList[idx]))
    },
    // 获取医生查房任务
    doctorWorkListFunc(id) {
      let data = 'userId=' + id
      doctorWorkList(data).then(res => {
        console.log('work', res.data)
        this.workDateArr = res.data;
        // 设置时间
        this.calenderFunc();
      })
    },
    // 日历时间设置
    calenderFunc() {
      let aDate = new Date();
      let y = aDate.getFullYear();
      let m = aDate.getMonth() + 1;
      // 获取当月的第一天是周几
      let week = new Date(y, aDate.getMonth(), 1).getDay();
      // 获取当月有多少天
      let newDate = new Date(y, m, 0).getDate();
      this.nowDate = y + '年' + this.addZeroFunc(m) + '月';
      let nowDateTime = y + '-' + this.addZeroFunc(m);
      // 获取下个月的第一天是周几
      let nextMonthWeek = new Date(y, m, 1).getDay();
      // 获取下个月有多少天
      let nextMonthDay = '', nextDateTime = '';
      // 判断当前月是不是12
      if (m == 12) {
        nextMonthDay = new Date(y + 1, 1, 0).getDate();
        this.nowDate1 = y + 1 + '年' + this.addZeroFunc(m % 12 + 1) + '月';
        nextDateTime = y + 1 + '-' + this.addZeroFunc(m % 12 + 1)
      } else {
        nextMonthDay = new Date(y, m + 2, 0).getDate();
        this.nowDate1 = y + '年' + this.addZeroFunc(m % 12 + 1) + '月';
        nextDateTime = y + '-' + this.addZeroFunc(m % 12 + 1)
      }
      // 当月的天数
      for (let i = 0; i < week; i++) {
        let json = {
          dateName: '',
          isSelect: false,
          dateTime: '',
          isWork: false,
          workId: '',
          works: ''
        }
        this.dateList.push(json)
      }

      for (let j = 1; j <= newDate; j++) {
        let json = {
          dateName: j,
          isSelect: true,
          dateTime: nowDateTime + '-' + this.addZeroFunc(j),
          isWork: false,
          workId: '',
          works: ''
        }
        // 今天之前的日期不可选择
        if (j < aDate.getDate()) {
          json.isSelect = false
        }
        // 判断什么时间有任务 显示不同状态
        for (let m = 0; m < this.workDateArr.length; m++) {
          if (json.dateTime == this.workDateArr[m].workDate) {
            json.isWork = true;
            json.workId = this.workDateArr[m].id;
            json.works = this.workDateArr[m].works;
          }
        }
        this.dateList.push(json)
      }
      // 下个月的天数
      for (let i = 0; i < nextMonthWeek; i++) {
        let json = {
          dateName: '',
          isSelect: false,
          dateTime: '',
          isWork: false,
          workId: '',
          works: ''
        }
        this.nextMonthArr.push(json)
      }

      for (let j = 1; j <= nextMonthDay; j++) {
        let json = {
          dateName: j,
          isSelect: true,
          dateTime: nextDateTime + '-' + this.addZeroFunc(j),
          isWork: false,
          workId: '',
          works: ''
        }
        // 判断什么时间有任务 显示不同状态
        for (let m = 0; m < this.workDateArr.length; m++) {
          if (json.dateTime == this.workDateArr[m].workDate) {
            json.isWork = true;
            json.workId = this.workDateArr[m].id;
            json.works = this.workDateArr[m].works;
          }
        }
        this.nextMonthArr.push(json)
      }
    },
    // 点击选中日期弹出窗口
    selectCalendarFunc(val, id, works) {
      console.log('val1111', works)
      this.time = val;
      this.workDateId = id;
      this.checkedWorkArr = works.split(',');
      console.log('this.checkedWorkArr', this.checkedWorkArr)
      this.showWork = true
    },
    // 获取选择任务
    changeWorkFunc() {
      console.log('val', this.checkedWorkArr.join(','))
    },
    // 提交选择的任务
    confirmWorkTypeFunc() {
      if (this.checkedWorkArr.length == 0) {
        this.$toast('请选择需要设置的任务');
        return false;
      }
      let data = {
        works: this.checkedWorkArr.join(','),
        userId: this.selectPatientId,
        workDate: this.time,
        id: this.workDateId == '' ? null : this.workDateId
      }
      tagWork(data).then(res => {
        console.log('selectwork', res.data)
        this.$toast({
          message: this.workDateId == '' ? '任务添加成功' : '任务更新成功',
          icon: 'success',
          mask: true
        })
        this.nowDate = '';
        this.nowDate1 = '';
        this.dateList = [];
        this.nextMonthArr = [];
        this.showWork = false;
        this.doctorWorkListFunc(this.selectPatientId);
      })
    },
    // 确认任务
    confirmWorkFunc() {
      this.showWork = false;
      this.$router.push({path: '/process', query: {userid: this.selectPatientId}})
    },
  },
}
</script>
<style scoped>
.home {
  width: auto;
  height: auto;
  padding-top: 20px;
}

.home-header {
  width: 100%;
  height: 300px;
}

.swiper-container {
    width: 500px;
    height: 300px;
}

.home-fenge{
  width: 100%;
  height: 5px;
  background-color: #F1F1F1;
}
.home-main {
  width: auto;
  height: auto;
  padding: 0px 0px 20px;
}

.calender-main {
  width: 100%;
  height: 100%;
}
.home-main-content-one{
  width: auto;
  height: auto;
  padding: 6px 10px;
  border-bottom: 1px solid #F1F1F1;
}
.home-main-content-one-l{
  width: auto;
  height: auto;
  flex: 1;
  overflow: hidden;
  margin-right: 15px;
}
.home-main-content-one-name{
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border-radius: 50%;
  margin-right: 20px;
  background-color: #08C68E;
}
.home-main-content-one-info{
  width: auto;
  height: auto;
  flex: 1;
}
.home-main-content-one-info1,.home-main-content-one-info2{
  width: 100%;
  height: auto;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}
.home-main-content-one-sj{
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #999;
}
.hospital-two-title{
  margin-top: 15px;
  margin-bottom: 5px;
  width: 100%;
  height: auto;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
.hospital-two-title-content{
  font-size: 18px;
  font-weight: 500;
  background-image: linear-gradient(0deg, #08C68E 0%, #2883C9 100%);
  background-image: -webkit-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Safari 5.1-6.0 */
  background-image: -o-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Opera 11.1-12.0 */
  background-image: -moz-linear-gradient(0deg, #08C68E 0%, #2883C9 100%); /* Firefox 3.6-15 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hospital-two-title-s1{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #28C99A;
}
.hospital-two-title-s2{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #28C99A;
}
.hospital-two-title-s1:nth-child(1){
  margin-right: 4px;
}
.hospital-two-title-s1:nth-child(5){
  margin-left: 4px;
}
.hospital-two-title-s2:nth-child(2){
  margin-right: 10px;
}
.hospital-two-title-s2:nth-child(4){
  margin-left: 10px;
}
.calender-main-list {
  width: auto;
  height: auto;
  flex: 1;
  padding: 15px 12px 80px;
  overflow: hidden;
  overflow-y: scroll;
}

.calender-main-list span{
  display: inline-block;
  font-size: 12px;
}
.calender-main-list::-webkit-scrollbar {
  display: none;
}

.calender-main-week {
  width: auto;
  height: auto;
  padding: 15px 12px 0;
  box-shadow: 0 2px 10px rgb(125 126 128 / 16%);
}

.calender-main-title {
  width: 100%;
  height: auto;
  columns: #333;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-top: 15px;
}

.calender-main-week span {
  display: block;
  width: auto;
  height: auto;
  flex: 1;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 10px;
  overflow: hidden;
}

.calender-main-date {
  width: 100%;
  height: auto;
}

.calender-main-date-list {
  width: 45px;
  height: 45px;
  overflow: hidden;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  /* padding: 8px 0px; */
  text-align: center;
  border-radius: 50%;
  margin-right: 5px;
}
.calender-main-date-list:nth-child(7n){
  margin-right: 0px;
}

.calender-main-date-list1 {
  color: #999;
}

.calender-main-date-list2 {
  color: #fff;
  background-color: #42DDA2;
}

.calender-work-btn {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-color: #fff;
}

.calender-work-btn-div {
  width: auto;
  height: auto;
  padding: 10px 12px;
}

.home-work {
  width: auto;
  height: auto;
  padding: 30px 20px;
}

.home-work-list {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.home-work-btn {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

/deep/ .van-contact-card::before{
  position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #ececec;
    content: '';
}
</style>
